<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>defineProperty方法</title>
</head>

<body>
  <script>
    // Object.defineProperty方法的使用
    let obj = {} // 实验对象
    let name = '' // 实验对象将劫持的属性
    console.log('劫持前的obj对象：', obj)

    // 设置obj对象将要劫持的name属性，劫持后对其get和set方法进行了重写。get函数在访问obj对象的name属性时会触发，set函数会在设置obj的name属性时触发
    Object.defineProperty(obj, 'name', {
      set: (val) => {
        name = val
        console.log('你设置了name的值为：', val);
      },
      get: () => {
        console.log('你取了name的值为:', `《${name}》`);
        return `《${name}》`
      }
    })
    // 给obj对象设置name属性并赋值，此时会触发上面的set函数
    obj.name = '权威指南' // 你设置了name的值为： 权威指南

    // 读取obj对象的name属性，此时会触发get函数
    console.log(obj.name); //你取了name的值为: 《权威指南》
  </script>
</body>

</html>